<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>后台登录</title>

		<link rel="stylesheet" th:href="@{static/admin/layui/css/layui.css}"/>
		<link rel="stylesheet" th:href="@{static/admin/css/login.css}"/>
		<script th:src="@{static/admin/lib/jquery/jquery.min.js}"></script>
	</head>

	<body>
		<div class="m-login-bg">
			<div class="m-login">
				<h3>后台系统登录</h3>
				<div class="m-login-warp">
					<form class="layui-form">
						<div class="layui-form-item">
							<input type="text" name="username" required lay-verify="required" placeholder="用户名" autocomplete="off" class="layui-input" value="zxw">
						</div>
						<div class="layui-form-item">
							<input type="text" name="password" required lay-verify="required" placeholder="密码" autocomplete="off" class="layui-input" value="123">
						</div>
						<div class="layui-row">
								<div class="layui-inline">
								    <input type="text" name="verification" required lay-verify="required" placeholder="验证码" autocomplete="off" class="layui-input">
								</div>
								<div class="layui-inline">
									<img class="verifyImg"/>
								</div>

						</div>
						<div class="layui-form-item m-login-btn">
							<div class="layui-inline">
								<button class="layui-btn layui-btn-normal" lay-submit lay-filter="login" id="loginBtn">登录</button>
							</div>
							<div class="layui-inline">
								<button type="reset" class="layui-btn layui-btn-primary">取消</button>
							</div>
						</div>
					</form>
				</div>
				<p class="copyright">Copyright 2021-2022 by xiwen</p>
			</div>
		</div>
		<script th:src="@{static/admin/layui/layui.js}" type="text/javascript" charset="utf-8"></script>

		<script>
			window.onload=function(){

				$(".verifyImg").click();

			}
			$(".verifyImg").on('click', function () {
				var url = '/Creditgt.jpg?d='+Math.random();
				$(this).attr('src',url);
				$(this).attr('src', ('/verificationCode?').replace('//', '/') + Math.floor(Math.random() * 100));
			});

			layui.use(['form', 'layedit', 'laydate'], function() {
				var form = layui.form,
				layer = layui.layer;

				//自定义验证规则
				form.verify({
					title: function(value) {
						if(value.length < 5) {
							return '标题至少得5个字符啊';
						}
					},
					password: [/(.+){6,12}$/, '密码必须6到12位'],

				});


				//监听提交
				form.on('submit(login)', function(data) {
					// layer.alert(JSON.stringify(data.field), {
					// 	title: '最终的提交信息'
					// })
					$.ajax({
						type: "POST",
						url: ("/login").replace('//', '/'),
						data:data.field,
						dataType: "json",
						success: function (data) {
							if (data.status == 200) {
								layer.msg(data.msg, {
									offset: '30%',
									time: 800
								}, function () {
									window.location.href = ("/loginSuccess").replace('//', '/');
								});
							}else{
								layer.msg(data.msg, {
									icon: 2,
									offset: '30%',
									time: 2000
								});
								$(".vcode-img").click();
							}
						}
					});
					return false;
				});

			});
		</script>
	</body>
</html>